<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes"/></head>
<link rel="stylesheet" href="css/structure.css" />
<link rel="stylesheet" href="css/skin.css" />
<link rel="stylesheet" href="css/table.css" />
<link rel="stylesheet" href="css/form.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/FixedColumns.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
var CONFIG_PARAMS;
localStorage.server_ip = "";
$(document).ready(function(){
	var temple = $("#temple");
	$.getJSON('mainService',function(data){
		CONFIG_PARAMS = data.params; 
		var length = data.targets.length;
		var width = 100/length;
		$.each(data.targets,function(i,item){
			var clone = temple.clone().show();
			var title = item.title;
			var page = item.page;
			clone.css("width",width+"%").find(".f_fenxi").html(title);
			if(i>0)
				clone.find("div").addClass("f_lr");
			$("header").append(clone);
			var div = $("<div>").css("height","100%").load(page,function(){
				$.getScript(page.replace("html","js")); 
			});
			$("#content2").append(div);
		});
		startAnime(data);
		temple.remove();
		$(".f_btn").first().find("div").addClass("f_item f_br");
		$(".f_btn").last().find("div").addClass("f_item f_lr");
	});
});
var i = 0;
function startAnime(data){
	setTimeout(function(){
		$("#content2").append($("#content2").children().eq(0));
		i++;
		startAnime(data);
	},data.targets_show_time[i%data.targets_show_time.length]*1000);
}

</script>
<style>
html,body,ul,li{
	height:100%;
	width:100%;
}
</style>
<body>
    <header>
        <div id="temple" class="f_btn" style="display:none;"><div><a class="f_fenxi"></a></div></div>
    </header>
	<div id="content2">
	
    </div>
</body>
</html>
